<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style type="text/css">
            body { margin: 0 ; padding: 0 ;}

            .odd { background: #dedede ; }
            .even { background: rgb(255, 190, 69) ; }

            .odd,
            .even { height: 300px; line-height: 300px ; text-align: center ; font-size: 100px ;}

            .mask {
                display: none ;
                position: fixed ;
                left: 0 ;
                top: 0 ;
                width: 100% ;
                height: 100% ;
                background: rgba(200, 200, 200, 0.75) ;
            }

            .dialog {
                position: absolute ;
                left: 50% ;
                top: 50% ;
                width: 400px ;
                height: 200px ;
                background: #fff ;
                margin-top: -100px ; /* 顶端外边距的绝对值是 元素高度的一半 */
                margin-left: -200px ; /* 左侧外边距的绝对值是 元素宽度的一半 */
                border: 1px solid #dedede ;
                border-radius: 10px ;
                box-shadow: 0 0 5px 4px rgba(250, 250, 250, 0.75) ;
                user-select: none ;
            }

        </style>
    </head>
    <body>

        <div class="mask">
            <div class="dialog">
                Are you OK ?
            </div>
        </div>

        <script type="text/javascript">
            ( function(){

                let body = document.querySelector( 'body' ); 
                for( let i = 0 ; i < 200 ; i++ ) {
                    let div = document.createElement( 'div' );
                    div.innerHTML = ( i + 1 );
                    div.classList.add( i % 2 == 1 ? 'odd' : 'even' );
                    body.appendChild( div );
                }


                let fn = function(){
                    let m = document.querySelector( ".mask" );
                    if( m ) {
                        m.style.display = 'block' ;
                    }
                }

                body.addEventListener( 'dblclick' , fn , false );
            })();
        </script>
        
    </body>
</html>